<li *ngIf="!isLeaf" role="menuitem" [ngClass]="{ disabled: option.disabled, 'devui-leaf-active': option.active }" (click)="clickItem()">
  <div class="devui-dropdown-item">
    <d-checkbox
      *ngIf="multiple"
      class="devui-dropdown-item-checkbox"
      [disabled]="option.disabled"
      [isShowTitle]="false"
      [halfchecked]="option.halfChecked"
      (click)="clickCheckbox($event)"
      [ngModel]="option.checked"
      [beforeChange]="avoidCheckboxChange"
    ></d-checkbox>
    <i *ngIf="option.icon" class="icon {{ option.icon }}"></i>
    <span class="dropdown-item-label">
      <ng-template
        [ngTemplateOutlet]="dropDownItemTemplate || defaultDropdownItemTemplate"
        [ngTemplateOutletContext]="{
          label: option.label,
          option: option
        }"
      >
      </ng-template>
    </span>
    <svg
      style="float: right"
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      class="icon devui-cascader-icon-right"
      *ngIf="!option._loading"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <polygon
          fill="#293040"
          fill-rule="nonzero"
          transform="translate(8.146447, 8.000000) scale(-1, 1) translate(-8.146447, -8.000000) "
          points="11.7071068 12.2928932 10.2928932 13.7071068 4.58578644 8 10.2928932 2.29289322 11.7071068 3.70710678 7.41421356 8"
        ></polygon>
      </g>
    </svg>
    <svg width="16px" height="16px" viewBox="0 0 16 16" style="float: right" class="icon devui-cascader-loading" *ngIf="option._loading">
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M8,1 C8.55228475,1 9,1.44771525 9,2 L9,4 C9,4.55228475 8.55228475,5 8,5 C7.44771525,5 7,4.55228475 7,4 L7,2 C7,1.44771525 7.44771525,1 8,1 Z M8,11 C8.55228475,11 9,11.4477153 9,12 L9,14 C9,14.5522847 8.55228475,15 8,15 C7.44771525,15 7,14.5522847 7,14 L7,12 C7,11.4477153 7.44771525,11 8,11 Z M15,8 C15,8.55228475 14.5522847,9 14,9 L12,9 C11.4477153,9 11,8.55228475 11,8 C11,7.44771525 11.4477153,7 12,7 L14,7 C14.5522847,7 15,7.44771525 15,8 Z M5,8 C5,8.55228475 4.55228475,9 4,9 L2,9 C1.44771525,9 1,8.55228475 1,8 C1,7.44771525 1.44771525,7 2,7 L4,7 C4.55228475,7 5,7.44771525 5,8 Z M12.9497475,3.05025253 C13.3402718,3.44077682 13.3402718,4.0739418 12.9497475,4.46446609 L11.5355339,5.87867966 C11.1450096,6.26920395 10.5118446,6.26920395 10.1213203,5.87867966 C9.73079605,5.48815536 9.73079605,4.85499039 10.1213203,4.46446609 L11.5355339,3.05025253 C11.9260582,2.65972824 12.5592232,2.65972824 12.9497475,3.05025253 Z M5.87867966,10.1213203 C6.26920395,10.5118446 6.26920395,11.1450096 5.87867966,11.5355339 L4.46446609,12.9497475 C4.0739418,13.3402718 3.44077682,13.3402718 3.05025253,12.9497475 C2.65972824,12.5592232 2.65972824,11.9260582 3.05025253,11.5355339 L4.46446609,10.1213203 C4.85499039,9.73079605 5.48815536,9.73079605 5.87867966,10.1213203 Z M12.9497475,12.9497475 C12.5592232,13.3402718 11.9260582,13.3402718 11.5355339,12.9497475 L10.1213203,11.5355339 C9.73079605,11.1450096 9.73079605,10.5118446 10.1213203,10.1213203 C10.5118446,9.73079605 11.1450096,9.73079605 11.5355339,10.1213203 L12.9497475,11.5355339 C13.3402718,11.9260582 13.3402718,12.5592232 12.9497475,12.9497475 Z M5.87867966,5.87867966 C5.48815536,6.26920395 4.85499039,6.26920395 4.46446609,5.87867966 L3.05025253,4.46446609 C2.65972824,4.0739418 2.65972824,3.44077682 3.05025253,3.05025253 C3.44077682,2.65972824 4.0739418,2.65972824 4.46446609,3.05025253 L5.87867966,4.46446609 C6.26920395,4.85499039 6.26920395,5.48815536 5.87867966,5.87867966 Z"
          fill="#293040"
        ></path>
      </g>
    </svg>
  </div>
</li>

<li *ngIf="isLeaf" role="menuitem" (click)="clickLeaf()" [ngClass]="{ disabled: option.disabled, 'devui-leaf-active': option.active }">
  <div class="devui-dropdown-item">
    <d-checkbox
      *ngIf="multiple"
      class="devui-dropdown-item-checkbox"
      [disabled]="option.disabled"
      [isShowTitle]="false"
      [halfchecked]="option.halfChecked"
      (click)="clickCheckbox($event)"
      [ngModel]="option.checked"
      (ngModelChange)="updateValue($event)"
      [beforeChange]="avoidCheckboxChange"
    ></d-checkbox>
    <i *ngIf="option.icon" class="icon {{ option.icon }}"></i>
    <span class="dropdown-item-label">
      <ng-template
        [ngTemplateOutlet]="dropDownItemTemplate || defaultDropdownItemTemplate"
        [ngTemplateOutletContext]="{
          source: option,
          label: option.label
        }"
      >
      </ng-template>
    </span>
  </div>
</li>

<ng-template #defaultDropdownItemTemplate let-label="label">
  <span>{{ label }}</span>
</ng-template>
